import React, { Component } from 'react';
import LinkTitle from '../common/LinkTitle';
import { Alert, Radio, Button } from 'antd';
import { EDITUSERINFO } from '../../store/user';
import Image from 'react-uwp/Image';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';
import AvatarModal from '../modal/AvatarModal';
const RadioGroup = Radio.Group;
export default class EditInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sex: 1,
      nickname: '',
      email: ''
    };
  }
  componentDidMount() {
    console.log(this.props.loading);
    this.closeErrMsg();
    const { sex, email, nickname } = this.props.userInfo;
    this.setState({
      sex,
      nickname,
      email
    });
  }
  closeErrMsg() {
    const { errMsg, showErrmsg } = this.props;
    if (errMsg) {
      showErrmsg('', EDITUSERINFO);
    }
  }

  submit() {
    const { nickname, email, sex } = this.state;
    const { showErrmsg, editInfo } = this.props;
    if (!nickname) {
      showErrmsg('昵称不能为空', EDITUSERINFO);
      return;
    }
    if (nickname.length > 10) {
      showErrmsg('昵称不能超过10个字符', EDITUSERINFO);
      return;
    }
    editInfo({ nickname, email, sex });
  }
  nickname = val => {
    this.setState({
      nickname: val
    });
  };
  email = val => {
    this.setState({
      nickname: val
    });
  };
  onChange = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      sex: e.target.value
    });
  };
  _crop() {
    // image in dataUrl
    console.log(this.refs.cropper.getCroppedCanvas().toDataURL());
  }
  render() {
    const { history, userInfo, loading, errMsg, openAvatar } = this.props;
    const { nickname, sex, email } = this.state;
    return (
      <div className="userCWrapper">
        <div className="ltWrapper">
          <LinkTitle title="个人信息" />
        </div>
        <div className="dfcc editWrapper">
          <div className="avatar pr">
            <Image
              className="imgCover aHelper"
              src={userInfo.avatar}
              onClick={openAvatar}
            />
            <a className="aNormal" onClick={() => openAvatar()}>
              点击修改头像
            </a>
          </div>
          <form>
            <Alert
              message={errMsg}
              type="error"
              showIcon
              style={{ width: '100%', display: errMsg ? 'block' : 'none' }}
            />
            <label className="label">
              <span className="mr10">
                <span className="cred">*</span>昵称
              </span>
              <input
                className="input"
                value={nickname}
                onChange={e => this.nickname(e.target.value)}
              />
            </label>
            <label className="label">
              <span className="mr10">电子邮箱</span>
              <input
                className="input"
                value={email}
                onChange={e => this.email(e.target.value)}
              />
            </label>
            <div className="dfr label">
              <span className="mr10">手机号码</span>
              <div>
                <span>{userInfo.phone}</span>{' '}
                <a className="ml10 aNormal">修改</a>
              </div>
            </div>
            <label className="label">
              <span className="mr10">性别</span>
              <RadioGroup onChange={this.onChange} value={sex}>
                <Radio value={1}>男</Radio>
                <Radio value={2}>女</Radio>
                <Radio value={0}>保密</Radio>
              </RadioGroup>
            </label>
            <div className="textcenter">
              <Button
                className="btn primary"
                onClick={() => this.submit()}
                loading={loading}
              >
                保存
              </Button>
            </div>
          </form>
        </div>
        <AvatarModal />
      </div>
    );
  }
}
